<template>
  <!-- <el-switch style="margin-top: 4px; margin-left: 8px; margin-right: 8px" v-model="isDark" inline-prompt
    active-icon="Moon" size="large" inactive-icon="Sunny" active-color="var(--el-fill-color-dark)"
    inactive-color="var(--el-color-primary)" @change="updateLayoutSetting" /> -->
  <div class="app-container home">
    <!-- <el-button type="success" @click="showDialogWithData"
      >弹窗表单（带数据）</el-button
    > -->
    <TitleComponent mainTitle="数据概览" subTitle="" />
    <div class="card">
      <div class="card-header">时间</div>
      <div class="card-body">
        <avue-form
          v-model="form"
          :option="option"
          @submit="handleSubmit"
        ></avue-form>
      </div>
    </div>

    <div class="card-container">
      <div class="container">
        <div v-for="(item, index) in items" :key="index" class="box">
          <div class="title">{{ item.title }}</div>
          <div class="content">{{ item.count }}</div>
        </div>
      </div>
    </div>

    <div style="margin: 20px 0">
      <div class="card">
        <h3>VIP数量统计</h3>
        <el-table :data="vipData" style="width: 100%">
          <el-table-column prop="VIP1" label="VIP1"></el-table-column>
          <el-table-column prop="VIP2" label="VIP2"></el-table-column>
          <el-table-column prop="VIP3" label="VIP3"></el-table-column>
          <el-table-column prop="VIP4" label="VIP4"></el-table-column>
          <el-table-column prop="VIP5" label="VIP5"></el-table-column>
        </el-table>
      </div>
    </div>

    <div class="card-container">
      <div class="container">
        <div v-for="(item, index) in items2" :key="index" class="boxs">
          <div class="title">{{ item.title }}</div>
          <div class="content">{{ item.count }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

// // 使用VueUse的useDark来响应式地处理深色模式
// const isDark = useDark();

// // 定义一个更新localStorage中layout-setting值的函数
// const updateLayoutSetting = () => {
//   const setting = {
//     theme: isDark.value ? "theme-dark" : "theme-light",
//     sideTheme: isDark.value ? "theme-dark" : "theme-light",
//   };
//   localStorage.setItem("layout-setting", JSON.stringify(setting));
// };

// // 使用watch来监听isDark的变化，并在变化时更新localStorage
// watch(isDark, () => {
//   updateLayoutSetting();
// });

// // 组件加载时也设置一次，确保同步状态
// onMounted(() => {
//   updateLayoutSetting();
import { reactive } from "vue";
import TitleComponent from "@/components/title/index.vue";
//setup用法
import { getCurrentInstance } from "vue";
import { $DialogForm } from "@smallwei/avue";
const { appContext } = getCurrentInstance();

// 测试

const ops = {
  title: "搜索页面",
  width: "30%",
  type: "drawer",
  menuPosition: "right",
  option: {
    submitText: "搜索",
    span: 24,
    // menuPosition: 'top',
    column: [
      {
        label: "用户",
        prop: "name",
        type: "input", // 使用输入框
      },
      {
        label: "方法",
        prop: "method",
        type: "select", // 使用下拉框
        dicData: [
          { label: "Select 1", value: 1 },
          { label: "Select 2", value: 2 },
        ],
      },
      {
        label: "路径",
        prop: "path",
        type: "input", // 使用输入框
      },
      {
        label: "IP",
        prop: "ip",
        type: "input", // 使用输入框
      },
      {
        label: "时间",
        type: "datetimerange",
        prop: "datetimerange",
        format: "YYYY-MM-DD HH:mm:ss",
        valueFormat: "YYYY-MM-DD HH:mm:ss",
        startPlaceholder: "开始时间日期",
        endPlaceholder: "结束时间日期",
      },
    ],
  },

  beforeClose: (done) => {
    console.log("关闭前方法");
    done();
  },
  callback: (res) => {
    console.log(res.data);
    console.log("关闭等待框");

    setTimeout(() => {
      res.done();
      setTimeout(() => {
        console.log("关闭弹窗");
        res.close();
      }, 1000);
    }, 1000);
  },
};

const showDialogWithData = (form) => {
  console.log(appContext);
  $DialogForm(appContext)(ops);
};

// end

const vipData = ref([
  {
    VIP1: 0,
    VIP2: 2,
    VIP3: 3,
    VIP4: 2,
    VIP5: 0,
  },
]);

const form = reactive({});
const option = reactive({
  labelWidth: 110,
  submitBtn: true,
  column: [
    {
      label: "时间",
      type: "datetimerange",
      prop: "datetimerange",
      span: 8,
      format: "YYYY-MM-DD HH:mm:ss",
      valueFormat: "YYYY-MM-DD HH:mm:ss",
      startPlaceholder: "开始时间日期",
      endPlaceholder: "结束时间日期",
    },
    {
      label: "代理编号",
      prop: "name",
      span: 8,
    },
    {
      label: "用户账号",
      prop: "sex",
      order: 1,
      span: 8,
    },
  ],
});

const items = reactive([
  { title: "充值(时间)", count: 23 },
  { title: "提现(时间)", count: 2 },
  { title: "新增VIP(时间)", count: 0 },
  { title: "注册人数(时间)", count: 0 },
  { title: "任务人数(时间)", count: 0 },
]);

const items2 = reactive([
  { title: "总充值", count: 23 },
  { title: "总提现", count: 2 },
  { title: "总VIP", count: 0 },
  { title: "总注册人数", count: 0 },
]);

const handleSubmit = (form) => {
  console.log("表单数据: ", form);
};
</script>

<style scoped lang="scss">
.bg-white {
  background-color: #fff;
  color: #2a2e30 !important;
}
.card {
  box-shadow: 0 2px 4px 0 rgba(13, 13, 13, 0.05);
  margin-bottom: 1.5rem;
  border-radius: 0.25rem;
}

.card-header {
  padding: 1.1rem 1.1rem 0;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.card-body,
.card-footer {
  padding: 1.1rem;
}
.container {
  display: flex;
  justify-content: space-between;
}

.box {
  width: calc(20% - 1rem);
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  border-radius: 0.25rem;
}
.boxs {
  width: calc(25% - 1rem);
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  border-radius: 0.25rem;
}

.title {
  padding: 1.1rem 1.1rem 0;
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.content {
  padding: 1.1rem;
}

h3 {
  margin-bottom: 16px;
}
.el-table th {
  text-align: center;
}
.el-table td {
  text-align: center;
}
</style>
